<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/Addons.js';
const geometry = new THREE.BufferGeometry();

// 顶点坐标（一个三角形）
const vertices = new Float32Array([
  0.0, 1.0, 0.0,   // 顶点0
  -1.0, -1.0, 0.0, // 顶点1
  1.0, -1.0, 0.0    // 顶点2
]);

// 顶点颜色（三个顶点相同颜色 = 整个面同色）
const colors = new Float32Array([
  1, 0, 0,  // 顶点0 - 红色
  1, 1, 0,  // 顶点1 - 红色
  0, 0, 1   // 顶点2 - 红色
]);

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const material = new THREE.MeshBasicMaterial({ 
  vertexColors: true, // 启用顶点颜色
  side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);

const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(50, width / height, 11, 1000);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();
scene.add(mesh);
scene.add(mesh);


const dotLight = new THREE.PointLight(0xffffff, 10000);
dotLight.position.set(100, 100, 100);
scene.add(dotLight);

const ambientLight = new THREE.AmbientLight(0x040404);
scene.add(ambientLight)

const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
})
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    renderer.render(scene, camera);
    const worldPosition = new THREE.Vector3();
    mesh.getWorldPosition(worldPosition);
    console.log(camera.near, camera.fov, worldPosition,mesh.position);
})

</script>